
<template>
<div>


  <div v-if="this.showType==1?true:false" class="fastFight">
    <el-table
      class="tables"
      border
      size="mini"
      ref="list"
      :header-cell-style="{background:'#ccc'}"
      :data="list"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="module" label="彩种"></el-table-column>
      <el-table-column prop="issue" label="期数"></el-table-column>
      <el-table-column prop="orderId" label="注单编号"></el-table-column>
      <el-table-column prop="createTime" label="下注时间"></el-table-column>
      <el-table-column prop="num" label="号码"></el-table-column>
      <el-table-column prop="itemAmount" label="金额"></el-table-column>
      <el-table-column prop="odds" label="赔率"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column  prop="statusName" label="退码">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1?true:false" @click="backCode(scope.row)" size="small" type="primary">退码</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="button">
      <el-input
        style="width:100px"
        @blur="getOdds"
        size="small"
        v-model="number"
        placeholder="请输入号码"
      ></el-input>
      <el-input style="width:100px" size="small" v-model="money" placeholder="请输入金额"></el-input>
      <span style="margin-left:30px">
        赔率：
        <span>{{oddss}}</span>
      </span>
      <el-button style="width:80px;margin-left:30px" @click="submit" size="small" type="primary">下注</el-button>
       <el-button style="width:80px;margin-left:30px" @click="submit1" size="small" type="primary">取消</el-button>
    </div>
  </div>
  <!-- 封盘 -->
    <div class="typeid" v-if="this.showType==2?true:false">
      <h1>已封盘</h1>
    </div>
    </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
  name: "fastFight",
  data() {
    return {
      list: [],
      number: "",
      money: "",
      oddss: ""
    };
  },
  computed: {
    ...mapState(["typedt","showType"])
  },
  created() {
    // this.getList();
    // console.log(this.$url.kuicklyPrint)
   
  },
  methods: {
    backCode(val) {
      this.$api.post(
        this.$url.cancel,
        {
          ids: val.orderId,
          module: this.typedt
        },
        res => {
          console.log(res.data);
          this.getList();
        }
      );
    },
    getList() {
      this.$api.post(
        this.$url.kuicklyPrint,
        {
          module: this.typedt
        },
        res => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        }
      );
    },
    getUserMsg(){
       this.$api.post(
        this.$url.getInfo,{},
        res => {
          console.log(res.data,"余额刷新")
          if (res.data.code == 200) {
             this.$store.commit("getUserMsg", JSON.stringify(res.data.data));
          }
        }
      );
    },
    submit() {     
      var params = {
        module: this.typedt,
        amount: this.money,
        items: this.number
      };
      this.$api.post(this.$url.kuicklyBuy, params, res => {
        if (res.data.code == 200) {
           this.$message({
            message: "下注成功",
            type: "success"
          });
         
          this.getList();   
          this.getUserMsg(); 
             
          this.number = "",
          this.money = "",
          this.oddss = ""
        }else{
           this.$message.error(res.data.msg);
        }
      });
    },
    submit1(){
      this.number = "",
      this.money = "",
      this.oddss = ""
    },
    getOdds() {
      var params = {
        module: this.typedt,
        num: this.number
      };
      this.$api.post(this.$url.info4Num, params, res => {
        console.log(res.data);
        this.oddss = res.data.data.odds;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.typeid{
  display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.fastFight {
  padding: 10px 5px;
  box-sizing: border-box;
  .button {
    margin: 10px 0;
    p {
      font-size: 14px;
      margin: 4px 0;
      color: red;
    }
  }
}
</style>
